<!-- 用户地址管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {}; }" searchConditionNum="6">
        <!-- <gzLink 
          :default-value="defaultCity"
          @change="handleCityChange"
        /> -->
        <GzTextUp v-model:value="searchData['phone']" placeholder="客户经理姓名" />
        <GzTextUp v-model:value="searchData['phone']" placeholder="客户经理手机号" />
        <GzTextUp v-model:value="searchData['phone']" placeholder="小程序唯一标识" />
      </GzSearchForm>
      <GzTable
        ref="infoTableRef"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        :scrollX="800"
      >
        <template #topBtnSlot>
          <a-button type="primary" @click="exportFunc">
            导出
          </a-button>
          <a-button type="primary" @click="updateAccount(false)">
            <plus-outlined />新增客户经理
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'isAustState'">
            <span>{{ record.isAustState == 0 ? "是" : record.isAustState == 1 ? "否" : "--" }}</span>
          </template>
          <template v-if="column.key == 'headPic'">
            <a-image v-if="record.headPic" :src="record.headPic" style="width: 80px;" />
            <img v-else src="@/assets/svg/default-img.svg" style="width: 80px;">
          </template>

          <template v-if="column.key === 'operation'">
            <GzTableColumns>
              <a-button v-if="$access('ENT_FANS_LIST_INFO_SCORE')" type="link" @click="updateAccount(record,record.fansId)">修改账户归属</a-button>
              <a-button v-if="$access('ENT_FANS_LIST_INFO_VIEW')" type="link" @click="resetPsd(record)">重置登录密码</a-button>
              <a-button v-if="$access('ENT_FANS_LIST_INFO_VIEW')" type="link" @click="delData(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>

    <a-modal
      v-model:visible="vdata.visible"
      :title="vdata.title"
      :width="500"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="list">
        <div class="item" style="margin: 10px 0;">
          姓名：111
        </div>
        <div class="item" style="margin: 10px 0;">
          手机号：111
        </div>
        <div class="item" style="margin: 10px 0;">
          归属机构：111
        </div>
        <div class="item" style="margin: 10px 0;">
          小程序唯一标识：111
        </div>
      </div>
      <div class="tips">
        {{ vdata.tips }}
      </div>
      <!-- <div style="width:100%;margin-bottom:20px;text-align:center">
        <div id="qrCodeUrl" style="width: 300px" class="qrcode" />
        <QrcodeVue :value="vdata.qrImgUrl" :size="250" class="qrcode" />
        <hr>
        <span>{{ vdata.payText }}</span>
      </div> -->
    </a-modal>
  </page-header-wrapper>
  <!-- 客户明细 -->
  <!-- <Detail ref="detailRef" /> -->
  <!-- 福分查看 -->
  <!-- <Good ref="goodRef" :callback="() => { infoTableRef.value.refTable(); }" /> -->
  <!-- 修改账户归属关系 -->
  <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTableRef.refTable()" />
</template>

<script lang="ts" setup>
import Detail from './Detail.vue'
import Good from './Good.vue'
import AddOrEdit from './AddOrEdit.vue'
import { $getFasnList, $exportFansList,$fansCancelOrReply } from '@/api/fansManage/fansList/index'
import {$apiAgentLiteGetList} from '@/api/proxy/programManage/liteBanner/index'

import { ref, reactive, getCurrentInstance, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import fileDownload from 'js-file-download'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const router = useRouter()
const vdata = reactive({
  visible:false,
  title:'',
  tips:''
})

const infoTableRef = ref()
const detailRef = ref()
const goodRef = ref()
const addOrEditRef = ref()

let tableColumns = reactive([
  { key: 'openId', title: '客户经理姓名', dataIndex: 'openId', fixed: 'left', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'fansUserId', title: '客户经理手机号', dataIndex: 'fansUserId', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'agentNo', title: '小程序唯一标识', dataIndex: 'agentNo', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'nickName', title: '归属网点', dataIndex: 'nickName', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'phone', title: '归属区县', dataIndex: 'phone', width: 140, minWidth: 140, maxWidth: 250, },
  { key: 'isAustState', title: '归属地市', dataIndex: 'isAustState', width: 140, minWidth: 140, maxWidth: 250, }, //0实名1没实名
  { key: 'operation', title: '操作', dataIndex: 'operation', fixed: 'right', align: 'center', width: 300, },
])


const defaultCity = ref({
  province: '41022445',
  
})

const currentSelection = ref({})

const handleCityChange = (value) => {
  currentSelection.value = value
  console.log('城市选择变化:', value)
}

// 重置登录账号
const resetPsd = (record) =>{
  vdata.title = '重置账号确认'
  vdata.tips='是否确认重置相关账户的密码至初始密码？'
  vdata.visible =true
}

// 删除
const delData = (record) =>{
  vdata.title = '删除确认'
  vdata.tips='删除后，将无法使用对应手机号/微信号，登录相关权限账户，是否删除？'
  vdata.visible = true
}
// 确认
const handleOk = () =>{
  vdata.visible =false
}
// 取消
const handleCancel = () =>{
  vdata.visible =false
}


const smallProgramlist = ref()
// 获取小程序列表
function  getLiteBannerList() {
  $apiAgentLiteGetList({ type: 1 }).then(res => {
    smallProgramlist.value = res
  })
}
const searchData: any = ref({})
function changehandle(val) {
  // 根据val找到对应的小程序
  const selectedProgram = smallProgramlist.value.find(item => item.appId === val)
   searchData.value.agentNo = selectedProgram ? selectedProgram.agentNo : ''
  
}

// 修改账户归属关系
const updateAccount = (params1,params2)=>{
  addOrEditRef.value.show(params1,params2)
}
// 请求table接口数据
function reqTableDataFunc(params: any) {
  params.startEntryTime = searchData.value.loginTime ? searchData.value.loginTime[0] : ''
  params.endEntryTime = searchData.value.loginTime ? searchData.value.loginTime[1] : ''
  params.startIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[0] : ''
  params.endIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[1] : ''
  return $getFasnList(params)
}

// 导出实名用户
function exportFunc() {
  searchData.value.startEntryTime = searchData.value.loginTime ? searchData.value.loginTime[0] : ''
  searchData.value.endEntryTime = searchData.value.loginTime ? searchData.value.loginTime[1] : ''
  searchData.value.startIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[0] : ''
  searchData.value.endIsAustTime = searchData.value.ralnameTime ? searchData.value.ralnameTime[1] : ''
  $exportFansList(searchData.value).then(res => {
    if(res){
          downloadFile(res)
    }else{
      $infoBox.message.error('导出失败，请稍后再试')
    }
  })
}
function downloadFile(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = '实名用户.xlsx' // 设置下载文件名
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  $infoBox.message.success('导出成功')
}

// 搜索
function searchFunc() {
  infoTableRef.value.refTable(true)
}
/**
 * 跳转福分记录页面 查询当前用户福分记录
 * @param userId userId
 */
const onScoreFunc = (record,fansId) => {
  
  goodRef.value.show(record,fansId)
}
// 客户明细
function customerDetails(record) {
  detailRef.value.show(record)
}

// 注销或者恢复
function logoffFunc (record){  
  if(record.state == 0){
    $infoBox.confirmDanger('确认注销？', '请确认是否注销当前用户？', () => {
   $fansCancelOrReply({fansUserId:record.fansUserId,state:2,fansId:record.fansId}).then(() => {
      $infoBox.message.success(`注销成功`)
      infoTableRef.value.refTable()
    })
  })
  }else{
    $infoBox.confirmDanger('确认恢复？', '请确认是否恢复当前用户？', () => {
    $fansCancelOrReply({fansUserId:record.fansUserId,state:0,fansId:record.fansId}).then(() => {
      $infoBox.message.success(`恢复成功`)
      infoTableRef.value.refTable()
    })
  })

  }
 
}

onMounted(() => {
  // 获取小程序列表
  getLiteBannerList()
})

</script>
